<!doctype html>

<html>

<head>
    
    <title>Profile: </title>
    <link rel="shortcut icon" href="bilder/thumbnail.png"/>  
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/profile.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/prototyp5.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src='http://wextserv.jit.su:80/socket.io/socket.io.js'></script>
    <script src="./js/globalFunctions.js"></script>
    <script src="./js/validateToken.js"></script>
    <script src="./js/validate.js"></script>
    <script src="./js/login.js"></script>
    <script src='./js/profile.js'></script>
    
</head>


<body id="playfull">

    
<!--SHOW/HIDE CHANGE PROFILE -->
<script type="text/javascript">


    function toggle_visibility(id) {
       var e = document.getElementById("change-info-container");
       if(e.style.display === 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
    
//-->

</script>
    
<!--START NAVIGATION FROM LEFT -->
    
    <nav class="main-nav" id="main-nav"></nav>

<!--END NAVIGATION FROM LEFT -->

    <div id="loginContainer"></div>
    
<!--END ACCOUNT Create account FROM RIGHT -->

<!--START HEADER -->

    <div id="header">
        <div id="header-box-nav">
            <a href="#main-nav" class="open-menu">
                <img alt="prototype" src="bilder/menu-alt-48.png" onmouseover="this.src='bilder/menu-alt-48-blue.png'" onmouseout="this.src='bilder/menu-alt-48.png'">
            </a>
        </div>
        <div id="loginBox">
        <a href="#account-login-main-nav" class="open-menu">
            <div id="account-login-header-box-nav">        
                CHECKING LOGIN STATUS...  
            </div>
        </a>
        </div>
    </div>

<!--END HEADER -->

<!--START PROFILE CONTENT -->

<div class="wrap">
    
    <!--START PROFILE HEADER -->
    <div id="profile-header-container">
        <div id="profile-image"></div>
        <div id="profile-add-to-contacts" onclick="addContact();">
            <a href="#"> <h3 class="profile">Follow</h3></a>
        </div>
        
        <div id="profile-info">
            <h1 class="profile" id="userName">Loading...</h1>
            <h3 class="profile">Gender: <span id="gender"></span></h3>
            <h3 class="profile">Age: <span id="age"></span></h3>
            <h3 class="profile">From: <span id="location"></span></h3>
            <p class="profile-own-message" id="description"></p>
     
        </div>
        
        <div id="profile-edit" onclick="toggle_visibility('change-info-container');" style="display: none;">
            <a href="#" ><h3 class="profile">Edit Profile</h3></a>
        </div>
        
        
        <div id="change-info-container">
            
            <h3 id="change-profile-header">Change your profile</h3>
            
            <form class="profile-change-info-form" id="updateProfile">
                <input type="text" id="updateGender" name="Gender" placeholder="Your gender?">
                <input id="description-profile" type="text" name="From" placeholder="Change your description. (300 letter max.)">
                <input type="text" id="updateAge" name="Age" placeholder="What´s your age?">
                <input type="text" id="updateFrom" name="From" placeholder="Where you from?">
                
                <input id="saveForm" name="saveForm" type="submit" value="Save your settings">
            </form>
            
            <form class="profile-change-settings-form">
                <div id="change-account-settings">
                    <form class="profile-change-info-form" id="updateProfile">
                    <input type="password" id="updateGender" name="Password" placeholder="Change your password">
                    <input type="password" id="updateGender" name="RepeatPassword" placeholder="Repeat new password">


                    <input id="saveForm-settings" name="saveForm" type="submit" value="Save Password">
                </div>
            </form>
            
            
        </div>
        
    </div>
    
    <div id="profile-header-submenu-container">
        
        <ul class="navigation">
            
            <li onclick="swapView('bestMoments');"><a href="#">Best moments</a></li>
            <li onclick="swapView('following');"><a href="#">Following</a></li>
            
	</ul>
        
    </div>
    
    <!--END PROFILE HEADER -->
    
    
    <div id="profile-best-moments-header">
            <h1 class="profile-best-moments-header">BEST MOMENTS</h1>
    </div>
    
    <div id="profile-best-moments-container">
    </div>
    
    <div id="profile-your-contacts-header" style="display:none;">
            <h1 class="profile-contact-header">Following</h1>
            <input type="text" id="profile-contact-search" autocomplete="off" placeholder="Search for a profile" required>
    </div>
    
    <div id="profile-your-contacts-container" style="display:none;">
        
    </div>
    
  
    
    
 
</div>
    
</body>


</html>
